<template>
  <section>
     
    <!-- 面包屑 -->
      <breadcrumbs></breadcrumbs>
    <div class="top-box">
      <span class="top-item"><img src="../../assets/images/shangpinzongshu.png" alt="" class="top-icon" />
        <div class="right-item-box">
          <p>
            <span class="fontTop">{{ xianshidata.goodsAllCount }}</span><br />
            <span class="fontText">商品总数（个）</span>
          </p>
        </div>
      </span>
      <span class="top-item"><img src="../../assets/images/shangjiazongshu.png" alt="" class="top-icon" />
        <div class="right-item-box">
          <p>
            <span class="fontTop">{{ xianshidata.goodsCountByOpen }}</span><br />
            <span class="fontText">上架总数（个）</span>
          </p>
        </div>
      </span>
      <span class="top-item"><img src="../../assets/images/xiajiazongshu.png" alt="" class="top-icon" />
        <div class="right-item-box">
          <p>
            <span class="fontTop">{{ xianshidata.goodsCountByOff }}</span><br />
            <span class="fontText">下架总数（个）</span>
          </p>
        </div>
      </span>
      <!-- <el-button type="primary" @click="addhouse">新增运营中心</el-button> -->
    </div>
    <!-- 查询条件 -->
    <el-form ref="searchForm" :model="searchForm" label-width="100px" inline class="demo-form-inline" size="small" style="border-bottom: 1px solid #f6f6f6">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="
            searchForm.current = 1;
            search();
          ">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <btns @exec="exec"></btns>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">商品列表</div>
      </div>
      <el-table :data="tableData" @selection-change="tableSelectionChange" style="width: 100%" row-key="ifId" border lazy
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
        <el-table-column prop="goodsIntegral" label="兑换积分">
        </el-table-column>

        <el-table-column prop="goodsStatus" label="状态">
          <template slot-scope="scope">
            <div type="danger" :underline="false" v-if="scope.row.goodsStatus == 2">禁用</div>
            <div type="success" :underline="false" v-if="scope.row.goodsStatus == 1">启用</div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" @click="goInfo(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="mgt-10 pd-0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.current"
                     :page-sizes="[10, 20, 30, 50]" :page-size="searchForm.size" layout="total, sizes, prev, pager, next, jumper"
                     :total="searchForm.totalCount">
      </el-pagination>
    </div>
    <el-dialog title="新增商品" :visible.sync="dialogCreateFormVisible">
      <el-form :model="createForm" label-width="120px" ref="createForm" :rules="rules">
        <!-- <el-table-column type="selection" width="40">
        </el-table-column> -->

        <el-form-item prop="goodsName" label="商品名称">
          <el-input v-model="createForm.goodsName" maxlength="25" show-word-limit autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="goodsIntegral" label="兑换积分">
          <el-input v-model="createForm.goodsIntegral" maxlength="25" type="number" show-word-limit autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="goodsType">
          <el-select v-model="createForm.goodsType" placeholder="请选择发送终端">
            <el-option label="虚拟" value="1"></el-option>
            <el-option label="实物" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="goodsStock" label="商品库存">
            <el-input v-model="createForm.goodsStock"
                        maxlength="25"
                        type="number"
                        show-word-limit
                        autocomplete="off"></el-input>
        </el-form-item> -->

        <el-form-item label="商品封面图" prop="goodsCover" :label-width="formLabelWidth">
          <el-upload :action="importFileUrl" v-model="createForm.goodsCover" list-type="picture-card" :before-upload="beforeAvatarUpload" :auto-upload="true"
                     :on-success="getUrl" :accept="'image/*'" :show-file-list="false">
            <img v-if="hasFile" :src="createAddfile" class="img-feng" alt="图片" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品轮播图" prop="goodsBanner" :label-width="formLabelWidth" :before-close="handleClose1">
          <el-upload :action="importFileUrl" v-model="createForm.goodsBanner" list-type="picture-card" :before-upload="beforeAvatarUpload" :auto-upload="true"
                     :on-success="getUrl1" :on-remove="handleRemove" :accept="'image/*'" :show-file-list="true" :file-list="filesEdit1">
            <!-- <img v-if="hasFile1" :src="createForm.addfile" class="img-feng" /> -->
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品详情" prop="goodsInfo">
          <Editor ref="child" v-model="createForm.goodsInfo"></Editor>
          <!-- <tinymce :height="300" v-model="createForm.goodsInfo"></tinymce> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddform">取 消</el-button>
        <el-button type="primary" @click="addBanner('createForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑商品信息" :visible.sync="dialogEditFormVisible" :before-close="handleClose">
      <el-form :model="EditForm" label-width="120px" ref="EditForm" :rules="rules">
        <el-form-item prop="goodsName" label="商品名称">
          <el-input v-model="EditForm.goodsName" maxlength="25" show-word-limit autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="goodsIntegral" label="兑换积分">
          <el-input v-model="EditForm.goodsIntegral" maxlength="25" type="number" show-word-limit autocomplete="off"></el-input>
        </el-form-item>

        <!-- <el-form-item prop="goodsStock" label="商品库存">
            <el-input v-model="EditForm.goodsStock"
                        maxlength="25"
                        type="number"
                        show-word-limit
                        autocomplete="off"></el-input>
        </el-form-item> -->

        <el-form-item label="商品封面图" prop="goodsCover" :label-width="formLabelWidth">
          <el-upload :action="importFileUrl" v-model="EditForm.goodsCover" list-type="picture-card" :auto-upload="true" :on-success="geEdittUrl"
                     :accept="'image/*'" :show-file-list="false">
            <img v-if="EditAddfile" :src="EditAddfile" class="img-feng" alt="图片" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品轮播图" prop="goodsBanner" :label-width="formLabelWidth">
          <el-upload :action="importFileUrl" v-model="EditForm.goodsBanner" list-type="picture-card" :before-upload="beforeAvatarUpload" :auto-upload="true"
                     :on-success="getUrlListEdit" :on-remove="handleRemove1" :accept="'image/*'" :show-file-list="true" :file-list="filesEdit">
            <!-- <img
              v-if="hasFile1"
              :src="createAddfile1"
              class="img-feng"
              alt="图片"
            /> -->
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品详情" prop="goodsInfo">
          <Editor v-model="EditForm.goodsInfo"></Editor>

          <!-- <Editor v-model="EditForm.goodsInfo" /> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddform">取 消</el-button>
        <el-button type="primary" @click="editBanner('EditForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
import btns from "@/components/btns.vue";
import mixins from "@/utils/mixins";
import Editor from "@/components/edit";
import breadcrumbs from "@/components/breadcrumbs.vue";
import { integerNumValidate } from "../../utils/tool";
import ue from '@/components/ue.vue';



export default {
  mixins: [mixins],
  components: {

    ue,
    btns,
    Editor,
    breadcrumbs,
  },
  data() {
    var FengValidate = (rule, value, callback) => {
      // console.log(this.addfile);
      if (this.addfile == "") {
        callback(new Error("请选择封面图片"));
      }
      // if (value == null || value == '') {
      //   this.activeNames = ['2'];
      // }
    };
    return {
      filesEdit1: [],
      editImgFile: [],
      EditAddfile: "",
      filesEdit: [],
      isTo: false,
      files: [],
      shangpindata: [],
      xianshidata: [],
      searchForm: {
        goodsName: "",
      },
      tableData: [],
      tableSelection: [],
      EditAddfile: "",
      createAddfile: "",
      hasFile: false,
      createAddfile1: "",
      hasFile1: false,
      isShowGoodsListEdit: false,
      isShowProductListEdit: false,
      isShowFengEdit: false,
      isShowEditedit: false,
      EditForm: {},
      dialogEditFormVisible: false,
      isShowGoodsList: false,
      isShowProductList: false,
      isShowFeng: false,
      ProductList: [],
      GoodsList: [],
      isShow: false,
      Adaddfile: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogCreateFormVisible: false,
      createForm: {
        addfile: "",
      },
      formLabelWidth: "120px",

      importFileUrl: this.GLOBAL.imgBaseUrl,
      isShowEdit: false,
      rules: {
        "goodsName": [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        "goodsIntegral": [
          { required: true, message: "请输入兑换积分", trigger: "change" },
          { validator: integerNumValidate, trigger: 'blur' }
        ],
        // goodsStock: [
        // { required: true, message: "请输入商品库存", trigger: "change" },
        // // { validator: allNumValidate, trigger: 'blur' }
        // ],
        "goodsCover": [
          { required: true, message: "请选择商品封面图", trigger: "change" },
          { validator: FengValidate, trigger: "change" },
        ],
        "goodsBanner": [
          { required: true, message: "请选择封面图片", trigger: "blur" },
          { validator: FengValidate, trigger: "change" },
        ],
        "goodsInfo": [
          { required: true, message: "请输入商品详情", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
      },
    };
  },
  created() {
    this.xianshi();
    this.shangpinlist();
    this.getList(this.currentPage, this.pageSize);
  },
  methods: {
    closeAddform() {
      this.dialogCreateFormVisible = false;
      this.dialogEditFormVisible = false;
      this.$set(this.createForm, "addfile", [])
      this.$nextTick(() => {
        this.files = [];
        this.hasFile1 = false;
        this.createForm.addfile = [];
      })
      this.hasFile1 = false;
    },
    handleClose1() {
      this.dialogEditFormVisible = false;
      this.createForm.addfile = [];
      this.files = [];
    },
    handleClose() {
      this.dialogEditFormVisible = false;
      // this.filesEdit = [];
      this.editImgFile = [];
    },
    goInfo(row) {
      this.$router.push({
        path: `/jifenshangcheng/addGoods`,
        query: {
          jid: row.goodsId,
        },
      });
    },

    shangpinlist() {
      this.$api.integral.huoqushangpinlist({}).then((d) => {
        if (d.code == 200) {
          this.shangpindata = d.data;
        }
      });
    },
    ueInput1(v) {
      this.createForm.goodsInfo = v;
    },
    ueInput(v) {
      this.EditForm.goodsInfo = v;
    },
    xianshi() {
      this.$api.integral.fanhuixianshi({}).then((d) => {
        if (d.code == 200) {
          this.xianshidata = d.data;
        }
      });
    },
    getUrlListEdit(item) {
      this.$message({
        type: "success",
        message: "图片上传成功",
      });

      let list = [];
      let obj = {};
      obj.index = 1;
      obj.url = item;
      this.filesEdit.push(obj);

      list.push(this.EditForm.addfile);

      console.log(this.filesEdit, "editImgList============================",);
    },

    exec(fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]();
      } else {
        this.$message.error("方法未定义");
      }
    },
    search() {
      this.dataList();
    },
    getList(curr, page) {
      this.$api.integral
        .jifenshangpinlist({
          current: curr,
          size: page,
          goodsName: this.searchForm.goodsName,
        })
        .then((d) => {
          this.tableData = d.data;
          if (d.curPage == 1) {
            this.searchForm.totalCount = d.totalCount;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //启用
    enable() {
      if (this.tableSelection.length < 1) {
        this.$message.error("请选择要操作的数据！");
        return;
      }
      let ids = this.tableSelection.map((e) => {
        return e.goodsStatus
      })
      let goodsId = this.tableSelection.map((e) => {
        return e.goodsId
      })
      let s = new Set(ids)
      if ([...s].length != 1) {
        return this.$message.error("请选择状态一致的数据！");
      }
      if ([...s][0] != 2) {
        return this.$message.error("请选择状态为禁用数据！");
      }
      this.$confirm("确认要启用这个商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.integral
            .shangpinstatus({
              goodsIds: goodsId.join(','),
              status: 1, //状态 2禁用 1启用
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "启用成功",
                });
                this.xianshi();
                this.shangpinlist();

                this.getList(this.currentPage, this.pageSize);
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消启用");
        });
    },
    //禁用
    disable() {
      if (this.tableSelection.length < 1) {
        this.$message.error("请选择要操作的数据！");
        return;
      }
      let ids = this.tableSelection.map((e) => {
        return e.goodsStatus
      })
      let goodsId = this.tableSelection.map((e) => {
        return e.goodsId
      })
      let s = new Set(ids)
      if ([...s].length != 1) {
        return this.$message.error("请选择状态一致的数据！");
      }
      if ([...s][0] != 1) {
        return this.$message.error("请选择状态为启用数据！");
      }
      this.$confirm("确认要禁用这个商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.integral
            .shangpinstatus({
              goodsIds: goodsId.join(','),
              status: 2, //状态 2禁用 1启用
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "禁用成功",
                });
                this.xianshi();
                this.shangpinlist();
                this.getList(this.currentPage, this.pageSize);
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消禁用");
        });
    },
    geEdittUrl(item) {
      // this.EditAddfile = item.data.url;
      this.EditAddfile = item;
      console.log("__________this.EditAddfile_______" + this.EditAddfile);
      this.$message({
        type: "success",
        message: "图片上传成功",
      });
    },
    editBanner(formName) {
      let isfalg = false;
      console.log("9999999999999999999999999" + this.filesEdit);
      let arr = [];
      this.filesEdit.forEach((item) => {
        // console.log(12312312312);
        if (item instanceof Object) {
          isfalg = true;
          arr.push(item.url);
        }
      });
      if (isfalg) {
        this.filesEdit = arr;
      }
      console.log(
        "==================+++++++++++++++++++++++++" +
        this.EditForm.EditAddfile
      );
      this.$api.integral
        .goodsEdit({
          goodsBanner: this.filesEdit.join(","),
          goodsCover: this.EditAddfile,
          goodsName: this.EditForm.goodsName,
          goodsIntegral: this.EditForm.goodsIntegral,
          goodsStock: 0,
          goodsInfo: this.EditForm.goodsInfo,
          goodsId: this.EditForm.goodsId,
        })
        .then((d) => {
          if (d.code == 200) {
            this.$message.success("编辑商品成功");

            this.getList(this.currentPage, this.pageSize);
            this.dialogEditFormVisible = false;
            this.filesEdit = [];
            this.editImgFile = [];
          } else {
            this.$message.error(d.msg);
          }
        });
    },

    handleRemove1(row) {
      this.filesEdit.forEach((item, index) => {
        if (row.index == item.index) {
          this.filesEdit.splice(index, 1);
        }
      });
    },

    handleRemove(row) {
      // console.log(row, this.files);
      let _self = this;
      this.files.forEach((item, index) => {
        if (item == row.response.data) {
          _self.files.splice(index, 1);
        }
      });
      console.log("移除的图片===" + this.files);
    },


    showEdit() {
      if (this.createForm.bannerType == 1) {
        this.isShowEdit = false;
        this.isShowGoodsList = true;
        this.isShowProductList = false;
        this.isShowFeng = true;
      } else if (this.createForm.bannerType == 2) {
        this.isShowGoodsList = false;
        this.isShowEdit = false;
        this.isShowFeng = true;
        this.isShowProductList = true;
      } else if (this.createForm.bannerType == 3) {
        this.isShowGoodsList = false;
        this.isShowEdit = true;
        this.isShowFeng = true;
        this.isShowProductList = false;
      }
    },
    showEditType() {
      // console.log(this.EditForm.type);
      if (this.EditForm.type == 1) {
        this.isShowEditedit = false;
        this.isShowGoodsListEdit = true;
        this.isShowProductListEdit = false;
        this.isShowFengEdit = true;
      } else if (this.EditForm.type == 2) {
        this.isShowGoodsListEdit = false;
        this.isShowEditedit = false;
        this.isShowFengEdit = true;
        this.isShowProductListEdit = true;
      } else if (this.EditForm.type == 3) {
        this.isShowGoodsListEdit = false;
        this.isShowEditedit = true;
        this.isShowFengEdit = false;
        this.isShowProductListEdit = false;
      }
    },

    addBanner(formName) {
      let isfalg = false;
      console.log("9999999999999999999999999" + this.filesEdit1);
      let arr = [];
      this.filesEdit1.forEach((item) => {
        // console.log(12312312312);
        if (item instanceof Object) {
          isfalg = true;
          arr.push(item.url);
        }
      });
      if (isfalg) {
        this.filesEdit1 = arr;
      }

      this.$api.integral
        .goodsAdd({
          goodsBanner: this.filesEdit1.join(","),
          goodsCover: this.createAddfile,
          goodsInfo: this.createForm.goodsInfo,
          goodsName: this.createForm.goodsName,
          goodsIntegral: this.createForm.goodsIntegral,
          goodsStock: 0,
          goodsType: this.createForm.goodsType,
        })
        .then((d) => {
          if (d.code == 200) {
            this.files = [];
            this.createForm = {};
            this.createForm.addfile = [];
            this.createForm.addfile1 = [];
            this.dialogCreateFormVisible = false;
            this.$refs.child.clearText();
            this.hasFile = false;
            this.hasFile1 = false;
            this.$message.success("商品添加成功");
            this.getList(this.currentPage, this.pageSize);
          } else {
            this.$message.error(d.msg);
          }
        });
    },
    clearText() {
      this.content = "";
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传活动封面大小不能超过 10MB!");
      }
      return isLt2M;
    },
    getUrl(item) {
      this.hasFile = true;
      // console.log(this.addfile);
      // this.addfile = item.data.url;
      // this.createForm.addfile = item;
      this.createAddfile = item;
      // console.log(item);
      // this.isShow = true;
      this.$message({
        type: "success",
        message: "图片上传成功",
      });
      // console.log(this.editimg);
    },

    getUrl1(item) {
      this.$message({
        type: "success",
        message: "图片上传成功",
      });

      let list = [];
      let obj = {};
      obj.index = 1;
      obj.url = item;
      this.filesEdit1.push(obj);



      console.log(this.filesEdit1, "editImgList============================",);


    },

    //打开新增模态框
    add() {
      console.log("进入新增")

      this.createForm = {
        goodsName: "",
        goodsIntegral: "",
        goodsCover: "",
        goodsBanner: "",
        goodsInfo: "",
        addfile: "",
      };

      this.filesEdit1 = [];


      // this.hasFile1 = false;
      // this.createForm.addfile=[],
      this.isShowGoodsList = false;
      this.isShowEdit = false;
      this.isShowFeng = false;
      this.isShowProductList = false;
      this.dialogCreateFormVisible = true;
    },
    //打开编辑模态框
    update() {
      if (this.tableSelection.length != 1) {
        this.$message.error("请选中一行数据");
        return;
      }
      this.isShowEditedit = true;
      this.isShowFengEdit = true;
      this.isShowProductListEdit = false;
      this.isShowGoodsListEdit = false;
      this.EditForm = {
        goodsCover: this.tableSelection[0].goodsCover,
        goodsName: this.tableSelection[0].goodsName,
        goodsIntegral: this.tableSelection[0].goodsIntegral,
        goodsInfo: this.tableSelection[0].goodsInfo,
        goodsId: this.tableSelection[0].goodsId,
      };

      this.EditAddfile = this.tableSelection[0].goodsCover;
      console.log(
        "+++++++++++++++ this.EditAddfile--------------" + this.EditAddfile
      );
      // this.EditAddfile1 = this.tableSelection[0].goodsBanner;
      let file = this.tableSelection[0].goodsBanner.split(",");
      file.forEach((item, index) => {
        if (item != "") {
          let obj = {};
          obj.url = item;
          obj.index = index;
          this.editImgFile.push(obj);
        }
      });
      this.filesEdit = this.editImgFile;

      this.dialogEditFormVisible = true;
    },
    //删除数据
    del() {
      if (this.tableSelection.length != 1) {
        this.$message.error("请选中一行数据");
        return;
      }
      this.$confirm("确认要删除这条banner, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.banner
            .updateState({
              bannerIds: this.tableSelection[0].bannerId,
              status: -1, //状态 0禁用 1启用
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "启用成功",
                });
                this.getList(this.currentPage, this.pageSize);
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消启用");
        });
    },
    search() {
      this.getList(this.currentPage, this.pageSize);
    },
    handleReset() {
      this.searchForm = {
        title: "",
        endTime: "",
        addTime: "",
      };

      this.search();
    },
    exec(fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]();
      } else {
        this.$message.error("方法未定义");
      }
    },
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(this.currentPage, val);
      // eslint-disable-next-line no-console
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(val, this.pageSize);
      // eslint-disable-next-line no-console
      // console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style scoped>
.dialog-footer {
  margin-top: 50px;
}
.top-box {
  width: 80%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.top-item {
  border: 1px rgb(189, 185, 185) solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  margin-right: 100px;
}
.top-icon {
  width: 25%;
  height: 25%;
  margin-right: 30px;
}
.fontText {
  font-size: 20px;
}

.fontTop {
  font-size: 40px;
}
.img-feng {
  width: 120px;
  height: 120px;
}
</style>
